<template>

	<view class="content">
		<view class="messageBox" v-for="item,index in messagesList" :key="index" @click="checkMessage(item)">
			<view class="MessageTop">
				<view class="UserInfo" @click.stop="checkUser(item.uid)">
					<view class="Avatar">
						<image :src="'http://cdn.gdxywsw.club/' + item.avatar" />
					</view>
					<view class="NicknameAndDate">
						<view class="Nickname">{{ item.nickname }}</view>
						<view class="Date"><i class="el-icon-time"></i>{{ item.date }}</view>
					</view>
				</view>

			</view>

			<view class="Title">
				{{ item.title }}
			</view>

			<view class="Content">
				{{ item.content }}
			</view>

			<view class="imagesBox" @click.stop="preview(item.images,$event,index)">
				<view class="Images1" v-if="item.images.length == 1">
					<image v-for="(img, index2) in item.images" :data-index="index2"
						:src="'http://cdn.gdxywsw.club/' + img" :key="index2" lazy-load="true"></image>
				</view>

				<view class="Images2" v-if="item.images.length >= 2&& item.images.length<=4">
					<image v-for="(img, index2) in item.images" :data-index="index2"
						:src="'http://cdn.gdxywsw.club/' + img" :key="index2" lazy-load="true"></image>
				</view>

				<view class="Images3" v-if="item.images.length > 4">
					<image v-for="(img, index2) in item.images" :data-index="index2"
						:src="'http://cdn.gdxywsw.club/' + img" :key="index2" lazy-load="true"></image>

				</view>

			</view>
			<view class="Three">
				<view>
					<uni-icons type="eye" size="18"></uni-icons>
					浏览:{{ item.views }}
				</view>
				<view>
					<uni-icons v-if="item.mark==0" type="hand-up" size="18"></uni-icons>
					<uni-icons v-else type="hand-up-filled" size="18" color="#d81e06"></uni-icons>
					点赞:{{ item.likes }}
				</view>
				<view>
					<uni-icons type="chat" size="18"></uni-icons>
					评论:{{ item.comments }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "messagesBox",
		props: {
			messagesList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			};
		},

		computed: {
			...mapState('my_Info', ['userInfo'])
		},
		mounted() {

		},
		methods: {
			// 查看帖子
			checkMessage(item, e) {

				this.addViews(item.mid)

				uni.navigateTo({
					url: '/subpkg/message_detail/message_detail?messageInfo=' + encodeURIComponent(JSON
						.stringify(item)),
				})

			},
			// 查看用户
			checkUser(uid) {
				if (uid == this.userInfo.uid) {
					uni.switchTab({
						url: '../../pages/userInfo/userInfo'
					})
				} else {
					uni.navigateTo({
						url: '/subpkg/othersHome/othersHome?otherUid=' + encodeURIComponent(JSON.stringify(
							uid)),
					})
				}
			},

			// 预览图片
			preview(images, e, index) {

				if (e.target.dataset.index === undefined) {
					this.checkMessage(this.messagesList[index])
					return
				}
				let imagesurl = images.map(item => {
					item = 'http://cdn.gdxywsw.club/' + item
					return item
				})

				uni.previewImage({
					urls: imagesurl,
					current: e.target.dataset.index
				})
			},

			// 浏览量+1
			async addViews(mid) {
				let {
					data: res
				} = await uni.$http.get('/messages/addViews/' + mid)
				// if (res.code == 2000) {
				// 	this.messagesList[index].views++
				// }
			}


		}
	}
</script>

<style lang="less">
	.content {
		background-color: #f8f8f8;

		.messageBox {
			margin-left: 10px;
			margin-right: 10px;
			margin-bottom: 10px;
			padding: 5px;
			border-radius: 5px;
			background-color: rgb(255, 255, 255);

			.MessageTop {
				display: flex;
				justify-content: space-between;

				.UserInfo {
					display: flex;

					.Avatar>image {
						width: 40px;
						height: 40px;
						border-radius: 40px;
					}

					.NicknameAndDate {
						margin-top: 3px;
						margin-left: 5px;
					}

					.Date {
						font-size: 10px;
					}
				}

				// .Cancel > img {
				//   width: 10px;
				// }

			}


			.Title {
				font-weight: bolder;
			}

			.imagesBox {
				width: 100%;
				margin-top: 5px;

				.Images1>image {
					max-width: 100%;
					object-fit: cover;
				}

				.Images2 {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
				}

				.Images2 image {
					width: 49%;
					height: 120px;
					margin-top: 2px;
					object-fit: cover;
				}

				.Images3 image {
					margin-right: 1px;
					margin-bottom: -5px;
					width: 32.4%;
					height: 120px;
					object-fit: cover;
				}

				image {
					// margin-top: 2px;
					border: 1px solid rgb(247, 247, 249);
					border-radius: 5px;

				}

			}




			.Three {
				margin-top: 5px;
				font-size: 12px;
				display: flex;
				justify-content: space-around;

				view {
					display: flex;
					align-items: center;
				}

			}


		}


	}
</style>
